<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link href="/static/plugins/ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet">
    <%@include file="/WEB-INF/views/common/header.jsp" %>
    <script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/ueditor.config.js?v=0.0.0.1"></script>
    <script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
    <title>商品添加</title>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="main-grids about-main-grids">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>商品添加</legend>
            </fieldset>

            <form class="layui-form" id="createGoodsForm" action="<c:url value="/goods/create" />">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="goodsName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品价格</label>
                        <div class="layui-input-inline">
                            <input type="number" name="goodsPrice" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-inline">
                            <select id="category" name="category">
                                <option value="">请选择</option>
                                <option value="0">写作</option>
                                <option value="1" selected="">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">商品描述</label>

                    <div class="layui-input-block">
                        <script type="text/javascript" id="myEditor"></script>
                    </div>
                </div>

                <div id="preViewContainer">

                </div>
            </form>
            <hr class="layui-bg-green">
            <div id="specificationShowContainer" class="layui-form-item">
                <button type="button" class="layui-btn" id="addSpecification">添加规格</button>

            </div>
            <hr class="layui-bg-green">

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="uploadPreView">预览图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="submit" lay-submit="" lay-filter="demo1">立即提交</button>
                </div>
            </div>
        </div>

    </div>
</div>
<div id="specificationTemplate" style="display: none;">
    <div class="layui-row">
        <label class="layui-form-label"></label>
        <div id="showSpecificationName" class="layui-col-md3">短款风衣</div>
        <div class="layui-col-md3"><span>￥</span><span id="showSpanSpecificationPrice"></span></div>
        <button onclick="editSpecification(this);" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon"></i>
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <input type="hidden" id="specificationName" name="specificationName" autocomplete="off" value=""
               readonly="readonly"
               class="layui-input">
        <input type="hidden" id="specificationPrice" name="specificationPrice" autocomplete="off" value=""
               readonly="readonly"
               class="layui-input">

    </div>
</div>


<div id="specificationContainer" style="display: none">
    <div class="col-sm-12">
        <div class="show-top-grids">
            <div class="main-grids about-main-grids">
                <div style="margin-top: 10px;" class="recommended-info">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">规格名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="specificationName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">规格价格</label>
                            <div class="layui-input-inline">
                                <input type="number" name="specificationPrice" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script type="application/javascript">
    var ue = UE.getEditor("myEditor");

    window.specificationCount = 0;
    /*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/user/create']");
    $nav_a.parent().addClass("active");
    $nav_a.parent().parent().css("display", "block");


    layui.use(['layer', 'upload'], function () {
        window.layer = layui.layer, upload = layui.upload;
        upload.render({
            elem: '#uploadPreView'
            , url: '/upload/image'
            , multiple: true
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res) {
                console.info(res.url);
                if (res.url)
                    $("#preViewContainer").append("<input type='hidden'  value='" + res.url + "' />")
            }
        });
    });


    $(function () {

        $("#addSpecification").click(function () {
            initDialog();
        });

        $("#createGoodsForm").validate({
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            submitHandler: function () {
                if ($("#category").val() === "") {
                    window.layer.msg("请选择类型", {icon: 5, anim: 6});
                    return false;
                }
                var formData = $('#createGoodsForm').serializeObject();
                formData = specialFormData(formData);

                formData = JSON.stringify(formData);
                $.ajax({
                    url: '<c:url value="/goods/create"/>',
                    dataType: 'json',
                    type: 'post',
                    data: formData,
                    contentType: "application/json",
                    error: function () {
                    },
                    success: function (data) {
                        if (data.code !== "200") {
                            window.layer.msg(data.message, {icon: 5, anim: 6});
                        } else {
                            window.layer.msg("创建成功！", {icon: 6, anim: 6});
                            window.location.href = '<c:url value="/goods/list"/>'
                        }
                    }
                });
            },
            rules: {
                goodsName: {
                    required: true
                },
                goodsPrice: {
                    required: true
                }
            },
            messages: {
                goodsName: {
                    required: "商品名称不能为空"
                },
                goodsPrice: {
                    required: "商品价格不能为空"
                }
            },
            showErrors: function (errorMap, errorList) {
                window.fault = this.numberOfInvalids() > 0;
                this.defaultShowErrors();
            },
            errorPlacement: function (error, element) {
                if (window.fault) {
                    window.fault = false;
                    $(element).addClass("layui-form-danger").focus();
                    window.layer.msg($(error).text(), {icon: 5, anim: 6});
                }
            }
        });

        $("#submit").click(function () {
            if ($("#createGoodsForm").validate()) {
                $("#createGoodsForm").submit();
            }
        });


    });

    function editSpecification(obj) {
        var $specificationContainer = $(obj).parent();
        console.info($specificationContainer);
        var name = $("input[name='specificationName']", $specificationContainer).val();
        var price = $("input[name='specificationPrice']", $specificationContainer).val();
        var _index = $specificationContainer.attr("idx");
        initDialog(price, name, _index);
    }


    function initDialog() {
        var _price = arguments[0] || 0;
        var _name = arguments[1] || "";
        var _index = arguments[2] || -1;
        var $temp = $("#specificationContainer");
        $("input[name='specificationName']", $temp).val(_name);
        $("input[name='specificationPrice']", $temp).val(_price);
        var addSpecificationDialog = window.layer.open({
            type: 1
            , area: ['600px']
            , content: $temp
            , btn: ['添加']
            , title: "编辑规格"
            , yes: function (index, layer) {
                var $specificationTemplate = $("#specificationTemplate > div").clone();
                if (_index !== -1) {
                    $specificationTemplate = $("#specificationShowContainer > div[idx='" + _index + "']")[0];
                }
                var realSpecificationName = $("input[name='specificationName']", $temp).val();
                var realSpecificationPrice = $("input[name='specificationPrice']", $temp).val();
                if (realSpecificationName === "") {
                    window.layer.msg("规格名称不能为空", {icon: 5, anim: 6});
                    return;
                }
                if (realSpecificationPrice === "") {
                    window.layer.msg("规格价格不能为空", {icon: 5, anim: 6});
                    return;
                }
                // 设置特性名称
                $("input[name='specificationName']", $specificationTemplate).val(realSpecificationName);
                $("#showSpecificationName", $specificationTemplate).text(realSpecificationName);
                //设置特性价格
                $("input[name='specificationPrice']", $specificationTemplate).val(realSpecificationPrice);
                $("#showSpanSpecificationPrice", $specificationTemplate).text(realSpecificationPrice);
                console.info(_index);
                if (_index === -1) {
                    $specificationTemplate.attr("idx", window.specificationCount++);
                    $("#specificationShowContainer").append($specificationTemplate);
                }
                window.layer.close(index);
            }
            , cancel: function (index, layero) {
                window.layer.close(index);
            }
        })

    }


    /**
     * 添加页面特别信息
     * @param m
     */
    function specialFormData(m) {
        var obj = m || {};
        obj.description = ue.getContent();
        var imageUrlList = [];
        $("#preViewContainer > input").each(function () {
            imageUrlList.push($(this).val());
        });
        if (imageUrlList) {
            obj.imageUrlList = imageUrlList;
        }
        var specificationList = [];
        $("#specificationShowContainer > div").each(function () {
            var specification = {};
            specification.specificationName = $("input:eq(0)", $(this)).val();
            specification.specificationPrice = $("input:eq(1)", $(this)).val();
            console.info(specification);
            specificationList.push(specification);
        });
        if (imageUrlList) {
            obj.specificationList = specificationList;
        }
        return obj;
    }


</script>
<%@include file="/WEB-INF/views/common/footer.jsp" %>


</html>
